<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>CleanCut - a Themeforest HTML Template</title>
	
	<!-- ########## CSS Files ########## -->	
	<!-- Screen CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/style5.css" type="text/css" media="screen" />
	<!-- lightbox CSS -->
	<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />	
	<!-- ########## end css ########## -->	
	
	
	<!-- JAVASCRIPT GOES HERE -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/cufon.js'></script>
	<script type='text/javascript' src='js/quicksand.font.js'></script>
	<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>	
	<script type='text/javascript' src='flashplayer/flowplayer-3.1.4.min.js'></script>
	<script type='text/javascript' src='js/custom.js'></script>
	
	<script type='text/javascript' src='js/multislide_example.js'></script>	
	<!--[if IE 6]>
	<script type='text/javascript' src='js/dd_belated_png.js'></script>
	<script>DD_belatedPNG.fix('.ie6fix');</script>
	<style>.box ul li a, .box ul a, .hr {zoom:1;}</style>
	<![endif]-->

</head>
<body id="top">

<div class="wrapper" id='wrapper_head'>

	<div class="center">
	
		<div id="head">
		
			<h1 class="logo"><a href="index.html" class='ie6fix'>CleanCut</a></h1>
			<ul id="nav">
				<li><a href="index.html">Home</a>
				<ul>
					<li><a href="index.html">Index - Block Slider</a></li>
					<li><a href="index_accordion.html">Index - Accordion Slider</a></li>
					<li><a href="index_fade.html">Index - Fading Slider</a></li>
					<li><a href="index_news.html">Index - News Slider</a></li>
					<li><a href="index_curtain.html">Index - Curtain Slider</a></li>
					<li><a href="multislide.html">Multiple sliders on one Page</a></li>
				</ul>
				</li>
				
				<li><a href="page.html">Template Files</a>
				<ul>
					<li><a href="index.html">Index - Block Slider</a></li>
					<li><a href="index_accordion.html">Index - Accordion Slider</a></li>
					<li><a href="index_fade.html">Index - Fading Slider</a></li>
					<li><a href="index_news.html">Index - News Slider</a></li>
					<li><a href="index_curtain.html">Index - Curtain Slider</a></li>
					<li><a href="multislide.html">Multiple sliders on one Page</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="single.html">Single Blog Page</a></li>
					<li><a href="portfolio.html">Portfolio Page</a></li>
					<li><a href="portfolio_single.html">Portfolio Single</a></li>
					<li><a href="page.html">Page</a></li>
					<li><a href="fullwidth.html">Page Fullwidth</a></li>
					<li><a href="contact.php">Contact</a></li>
					<li><a href="#">Second Level »</a>
						<ul>
						<li><a href="#">Just for</a></li>
						<li><a href="#">Demonstration</a></li>
						<li><a href="#">Purpose</a></li>
						</ul>
					</li>
					</ul>
				</li>
				<li class='current'><a href="styles.html">Styling</a>
					<ul>
					<li><a href="multislide.html">Multiple sliders on one page</a></li>
					<li><a href="styles.html">HTML styling</a></li>
					<li><a href="page.html">Columns in page with sidebar</a></li>
					<li><a href="fullwidth.html">Columns on Fullwidth page</a></li>
					</ul>
				</li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="portfolio.html">Portfolio</a>
					<ul>
					<li><a href="portfolio_2.html">Portfolio different heights</a></li>
					<li><a href="portfolio_single.html">Portfolio Single</a></li>
					</ul>
				</li>
				<li><a href="contact.php">Contact</a></li>
			</ul>
			
		<!--end head-->
		</div>
		
	<!-- end center-->
	</div>
<!--end wrapper-->
</div>


<!-- extra heading, remove if not needed-->
<div class="wrapper" id='wrapper_heading'>
	<div class="center">
	<h2>The Theme got a ton of slideshow options, on this page I'll show you some examples of what can be accomplished</h2>
	<!-- end center-->
	</div>
<!--end wrapper-->
</div>


<div class="wrapper" id='wrapper_main'>

	<div class="center">		
		
		<div id="main">
				
		<div class='content'>
		
			<div class="entry">
	          
	           <h1 class='siteheading'><a href="#">As you can see you can have any number of slideshows of any size in your content area</a></h1>
	           	           
	           <div class="entry-content">
	           <h2>Blockslider</h2>
	           <!-- ###################################################################### -->
				<div class="feature_wrap feature_wrap1">
				<!-- ###################################################################### -->
					<div class='featured_inside medium_sized_slider multislide1'>
					
						<span class='fancyborder ie6fix fancyborder_top'></span>
						<span class='fancyborder ie6fix fancyborder_left'></span>
						<span class='fancyborder ie6fix fancyborder_right'></span>
						<span class='fancyborder ie6fix fancyborder_bottom'></span>
					
							<div class="featured featured1">
								<a href="files/content_pic2.jpg">
									<img src="files/content_pic_large1.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured2">
								<a href="files/content_pic1.jpg">
									<img src="files/content_pic_large2.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured3">
								<a href="files/content_pic3.jpg">
									<img src="files/content_pic_large3.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
					
					</div>						
				<!-- ###################################################################### -->
				</div><!-- end featuredwrap -->
				<!-- ###################################################################### -->
				
				<pre>
jQuery(".multislide1").kriesi_block_slider(
{
	slides: '.featured',				
	animationSpeed:600,					
	autorotation: false,				
	autorotationSpeed:3,				
	slideControlls: 'items',			
	appendControlls: '.feature_wrap1',	
	blockSize: {height: 65, width:65},
	betweenBlockDelay:35,				
	showText: false,					
	display: 'diagonaltop', 					
	switchMovement: true				
});
				</pre>
				
				<div class='hr'><a href="#top" class='scrollTop'>top</a></div>
	           
	           <h2>Fadeslider</h2>
	           <!-- ###################################################################### -->
				<div class="feature_wrap feature_wrap2">
				<!-- ###################################################################### -->
					<div class='featured_inside medium_sized_slider multislide2'>
					
						<span class='fancyborder ie6fix fancyborder_top'></span>
						<span class='fancyborder ie6fix fancyborder_left'></span>
						<span class='fancyborder ie6fix fancyborder_right'></span>
						<span class='fancyborder ie6fix fancyborder_bottom'></span>
					
							<div class="featured featured1">
								<a href="files/content_pic2.jpg">
									<img src="files/content_pic_large1.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured2">
								<a href="files/content_pic1.jpg">
									<img src="files/content_pic_large2.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured3">
								<a href="files/content_pic3.jpg">
									<img src="files/content_pic_large3.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
					
					</div>						
				<!-- ###################################################################### -->
				</div><!-- end featuredwrap -->
				<!-- ###################################################################### -->
				
				<pre>
jQuery('.multislide2').kriesi_block_slider(
{
	slides: '.featured',			
	animationSpeed: 1500,			
	autorotation: false,			
	autorotationSpeed:3,			
	slideControlls: 'items',		
	appendControlls: '.feature_wrap2,
	transition: 'fade'				
});
				</pre>	   
				
				<div class='hr'><a href="#top" class='scrollTop'>top</a></div>        
	           
	           <h2>Curtainslider</h2>
	           <!-- ###################################################################### -->
				<div class="feature_wrap feature_wrap3">
				<!-- ###################################################################### -->
					<div class='featured_inside medium_sized_slider multislide3'>
					
						<span class='fancyborder ie6fix fancyborder_top'></span>
						<span class='fancyborder ie6fix fancyborder_left'></span>
						<span class='fancyborder ie6fix fancyborder_right'></span>
						<span class='fancyborder ie6fix fancyborder_bottom'></span>
					
							<div class="featured featured1">
								<a href="files/content_pic2.jpg">
									<img src="files/content_pic_large1.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured2">
								<a href="files/content_pic1.jpg">
									<img src="files/content_pic_large2.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
							
							<div class="featured featured3">
								<a href="files/content_pic3.jpg">
									<img src="files/content_pic_large3.jpg" alt="" />
								</a>
							</div><!-- end .featured -->
					
					</div>						
				<!-- ###################################################################### -->
				</div><!-- end featuredwrap -->
				<!-- ###################################################################### -->
				
				<pre>
jQuery('.multislide3').kriesi_block_slider(
{
	slides: '.featured',
	animationSpeed: 700,
	autorotation: false,
	autorotationSpeed:3,
	slideControlls: 'items',
	appendControlls: '.feature_wrap3',
	showText: true,
	blockSize: {height: 'full', width:30},
	betweenBlockDelay:60,
	switchMovement: true,
	transition: 'slide'
});
				</pre>	
				
				<div class='hr'><a href="#top" class='scrollTop'>top</a></div>
				
				<h2>Newsslider &amp; Accordion</h2>
				<p>The news and accordion slider are currently only available when used on the front page for a big featured image. Check the examples below:</p>
				<ul>
					<li><a href='index_accordion.html'>Accordion Slider</a></li>
					<li><a href='index_news.html'>Newsslider</a></li>
				</ul>
				 
	           
	           <!-- end entry-content-->
	           </div>
	 			
	 		<!--end entry -->	
 			</div>
 			
	
		<!--end content-->
		</div>	
			
		
		<div class="sidebar">
		<span class="sidebar_top"><!-- needed for smooth start of sidebar background--></span>
		<span class="sidebar_bottom"><!-- needed for smooth end of sidebar background--></span>
		
			<div class="box one_fourth">
				
			<h3>Blog Categories</h3>
			<ul>
				<li><a href="index.html">Network News</a></li>
				<li><a href="blog.html">Web Design &amp; Development</a></li>
				<li><a href="single.html">Adobe Creative Suite 4</a></li>
				<li><a href="page_fullwidth.html">Dreamweaver CS4</a></li>
				<li><a href="page.html">Image Editing</a></li>
				<li><a href="page.html">Photoshop CS4</a></li>
				<li><a href="page_fullwidth.html">Fireworks CS4</a></li>
				<li><a href="portfolio.html">Theme and Template Design</a></li>
				<li><a href="portfolio_single.html">Javascript Libraries</a></li>
				<li><a href="page.html">jQuery - Write less do more</a></li>
				<li><a href="page_fullwidth.html">Mootools - A compact javascript framework</a></li>
			</ul>	
				
					
			</div><!--end box-->
			
			<div class="box one_fourth">
				<h3>Latest News</h3>
				<ul>
					<li><a href="single.html">Our New Page is online</a></li>
					<li><a href="single.html">Flash Slider Released</a></li>
					<li><a href="single.html">Apple buys Microsoft</a></li>
					<li><a href="single.html">Adobe buys Macromedia</a></li>
				</ul>
			</div>
				
		</div>
		
		<!--end main-->
		</div>
		
		
		<div id="footer_inside">
		
		<!--end footer_inside-->
		</div>

	<!-- end center-->
	</div>
<!--end wrapper-->
</div>

<div class="wrapper" id='wrapper_footer'>
	
	<div id="footer_outside">
		<span class="copyright">
			&copy; Copyright <a href='#'>YourName.Inc</a> - 
			Design by <a href="http://www.kriesi.at">Kriesi.at - Wordpress Themes</a>
		</span>
		
		<ul class="social_bookmarks">
			<li class="rss"><a href="#" class="ie6fix">RSS</a></li>
			<li class="facebook"><a href="#" class="ie6fix">Facebook</a></li>
			<li class="twitter"><a href="#" class="ie6fix">Twitter</a></li>
			<li class="flickr"><a href="#" class="ie6fix">flickr</a></li>
		</ul>
		
		<a href="#top" class='scrollTop'>top</a>
	<!--end footer_outside-->
	</div>
	
	
	
<!--end wrapper -->
</div>

</body>
</html>